<!DOCTYPE html>
<html class="g-html">
<head>
	<meta charset="utf-8" />
	<meta name="renderer" content="webkit" />
	<meta name="keywords" content="Nui,Nui框架,Nui组件,axnfex,诺诺框架,诺诺前端,爱信诺框架,爱信诺前端" />
	<meta name="description" content="Nui框架是诺诺网前端团队根据自身业务的特点开发出来的模块化前端框架，提供了丰富的组件以适应不同业务需求进行快速开发。" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Nui.js</title>
    <link rel="icon" type="image/vnd.microsoft.icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="icon" type="image/x-icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="shortcut icon" type="image/x-icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="stylesheet" type="text/css" href="/nui/assets/style/base-min.css?v=0de6a3f"/>
    
</head>
<body class="g-body">
	<!-- header -->
	<div class="g-header f-clearfix">
	    <a class="m-logo f-fl" href="/nui/">
            <img src="/nui/assets/images/logo.png?v=a987f30" alt="Nui.js" class="f-fl" />
            <em class="f-fl e-ml10 f-fs24">Nui.js</em>
        </a>
        <ul class="m-nav f-fr f-fs16">
            
	
	
    <li class="f-fl">
        <a class="s-crt" href="/nui/pages/">教程</a>
    </li>
    <li class="f-fl">
        <a href="https://axnfex.github.io/2017/02/28/jobs/" target="_blank">加入我们</a>
    </li>
    <li class="f-fl">
        <a href="http://zjaisino.github.io/" target="_blank">前端规范</a>
    </li>
    <li class="f-fl">
        <a href="https://axnfex.github.io/" target="_blank">团队博客</a>
    </li>


        </ul>
	</div>
	<!-- /header -->

	<!-- content -->
	<div class="g-content">
    
	<div class="g-main f-fr">
		<div class="mainbox">
			<h1 class="e-pt20 e-pb20 f-fs28" id="开发组件">开发组件</h1>
			<div class="e-mt15 f-lh22">
				<p>Nui以面向对象的方式封装组件，内置一个组件基础类模块，包含类属性、类方法、实例属性、实例方法（不懂的问度娘），开发组件时必须继承该模块，也可以根据实际需要继承已有的组件，并对齐进行重新封装。</p>
			</div>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="命名规范">命名规范</h2>
			<div class="e-mt15 f-lh22">
				<p>文件名即是组件名，不能重复且只能由下划线、字母、数字组成。</p>
				<p>“_”前缀表示为私有属性或者方法，仅内部使用。</p>
				<p>“__”前缀表示系统内置的属性或者方法，仅内部使用，不可重写或修改。</p>
				<p>没有“_”前缀的表示对外公开的属性或方法，可通过“实例对象.方法名”或者“类.方法名”访问。</p>
				<p>回调方法必须on开头方法名第一个字母大写，例如onDestroy。</p>
			</div>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="私有实例属性">私有实例属性</h2>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> __id</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：实例标识符</p>
				<p>类型：{Number}</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _options</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：设置选项参数</p>
				<p>类型：{Object}</p>
				<p>默认值：</p>
				<table class="data e-mt5">
					<tr>
						<th width="100">参数名</th>
						<th width="150">参数类型</th>
						<th>参数说明</th>
					</tr>
					<tr>
						<td>target</td>
						<td>Selector</td>
						<td>调用组件的元素</td>
					</tr>
					<tr>
						<td>id</td>
						<td>String</td>
						<td>组件id</td>
					</tr>
					<tr>
						<td>skin</td>
						<td>String</td>
						<td>组件皮肤</td>
					</tr>
					<tr>
						<td>className</td>
						<td>String</td>
						<td>给组件生成的元素上增加一个类或者多个类，需配合实例方法_tplData生效</td>
					</tr>
					<tr>
						<td>onInit</td>
						<td>Function</td>
						<td>组件初始化时回调，根据实际情况在适当的位置调用，比如element元素创建完成后</td>
					</tr>
					<tr>
						<td>onReset</td>
						<td>Function</td>
						<td>组件重置时回调</td>
					</tr>
					<tr>
						<td>onDestroy</td>
						<td>Function</td>
						<td>组件销毁时回调</td>
					</tr>
				</table>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _static</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：设置类属性以及方法</p>
				<p>类型：{Object}</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _template</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：设置模版</p>
				<p>类型：{Object}</p>
				<p>默认：</p>
			</div>
<script type="text/highlight" data-javascript-options>
_template:{
	style:'<%each style%><%$index%>:<%$value%>;<%/each%>'
}
</script>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _events</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：绑定事件，_event方法调用后才生效</p>
				<p>类型：{Object}</p>
			</div>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="私有实例方法">私有实例方法</h2>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _init</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：入口函数，实例初始化时仅执行一次，内部必须调用_exec方法</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _exec</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：主函数，用于拦截校验，是否执行后续逻辑，执行reset以及option方法时，会重新调用该函数</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _getTarget</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：检测_options中target是否有效，有效则设置实例属性target，并在target上添加“nui_component_组件名”属性，无效返回null</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _jquery</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：检测元素是否是jQuery对象，是就返回该对象，不是就封装为jQuery对象</p>
				<p>参数：elem {selector} 元素</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _bindComponentName</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：给元素添加“nui_component_组件名”属性，并在dom元素上绑定对象实例</p>
				<p>参数：element {jQuery Object} </p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _tplData</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：在data中增加className属性，用于设置组件生成的元素外部类名</p>
				<p>参数：data {Object} 模版数据</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _tpl2html</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：获取编译后的模版</p>
				<p>参数：id {String} 模版id</p>
				<p>参数：data {Object, Array} 模版数据</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _event</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：绑定事件，实例属性中必须包含element（生成的组件元素）与_events属性，用法参考<a class="f-corange" target="_blank" href="/nui/pages/events.html">代理事件</a></p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _on</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：绑定事件</p>
				<p>参数：type {String} 事件类型</p>
				<p>参数：dalegate {Selector} 代理元素</p>
				<p>参数：selector {String} 触发事件元素</p>
				<p>参数：callback {Function} 事件回调</p>
				<p>参数：trigger {Boolean} 是否立即执行事件</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _off</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：销毁事件</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _delete</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：删除组件实例</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _reset</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：销毁事件并删除element元素</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _callback</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：调用选项参数回调函数，不论有没有传递参数，第一个实参都为当前对象实例</p>
				<p>参数：method {String} 回调名，不包含on前缀，第一个字母大写</p>
				<p>参数：args {Array} 回调传递参数</p>
			</div>
<script type="text/highlight" data-javascript-options>
this._callback('Change', [arg1, arg2, ...])

//调用组件
组件名({
	onChange:function(self, arg1, arg2, ...){

	}
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="实例方法">实例方法</h2>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> on</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：绑定回调方法，设置后覆盖之前已经启用的回调方法</p>
				<p>参数：name {String} 回调方法名称，不包含前缀on，第一个字母不区分大小写</p>
				<p>参数：name {Object} 设置多个回调方法，使用后第2个参数将无效</p>
				<p>参数：callback {Function} 回调方法</p> 
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> option</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：设置组件选项参数</p> 
				<p>参数：options {String} 设置单个参数</p> 
				<p>参数：options {Object} 设置参数集合</p> 
				<p>参数：isOriginal {Boolean} 是否在最初的选项参数基础上设置</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> reset</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：重置组件</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> destroy</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：销毁组件</p>
			</div>
			<div class="e-mt15 f-lh22 f-cred">
				<p>若组件不需要option/reset/destroy实例方法，继承后设置为null即可</p>
			</div>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="私有类属性">私有类属性</h2>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> __instances</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：组件实例集合</p>
				<p>类型：{Object}</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> __parent</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：返回父组件对象信息</p>
				<p>类型：{Object}</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> __component_name</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：返回组件名</p>
				<p>类型：{String}</p>
			</div>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="私有类方法">私有类方法</h2>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _init</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：组件被创建时被调用一次</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _getSize</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：返回元素边缘大小</p>
				<p>参数：elem {jQuery Object} 元素</p>
				<p>参数：dir {String} 方向（l, r, lr, t, b, tb），l表示left，r表示right以此类推，默认值为tb</p>
				<p>参数：attr {String} 边缘属性（border, padding, margin, all），默认值为border</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _$fn</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：将组件封装为jQuery插件形式，不需要的话设置为null</p>
				<p>参数：name {String} 组件名</p>
				<p>参数：module {Function} 组件模块</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> _$ready</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：自执行组件，元素上必须包含data-组件名-options="选项参数"，不需要的话设置为null</p>
				<p>参数：name {String} 组件名</p>
				<p>参数：module {Function} 组件模块</p>
			</div>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="类方法">类方法</h2>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> config</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：设置组件默认参数</p>
				<p>参数：attr {String, Object} 选项参数名或者集合</p>
				<p>参数：value 选项参数值</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> hasInstance</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：校验包含该id的实例是否存在，如果存在则返回实例对象，否则返回false</p>
				<p>参数：id {Number, String} 组件实例_options中的id或者实例返回的__id</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> init</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：初始化容器内包含data-组件名-options="选项参数"属性的组件</p>
				<p>参数：container {Object} 容器元素</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> reset</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：重置组件</p>
				<p>参数：container {Object} 容器元素（选填）</p>
				<p>参数：id {Number, String} 组件实例_options中的id或者实例返回的__id</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> option</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：设置组件选项参数</p>
				<p>参数：container {Object} 容器元素（选填）</p>
				<p>参数：options {String} 设置单个参数</p> 
				<p>参数：options {Object} 设置参数集合</p> 
				<p>参数：isOriginal {Boolean} 是否在最初的选项参数基础上设置</p>
				<p>参数：id {Number, String} 组件实例_options中的id或者实例返回的__id</p>
			</div>
			<h3 class="e-mt20 f-fs20"><b class="f-corange">#</b> destroy</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：销毁组件</p>
				<p>参数：container {Object} 容器元素（选填）</p>
				<p>参数：id {Number, String} 组件实例_options中的id或者实例返回的__id</p>
			</div>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="封装组件">封装组件</h2>
<script type="text/highlight" data-javascript-options>
//编写一个简单的copy组件
//copy.js
Nui.define(['{core}/component'], function(component){
	//继承基类或者组件
	var Copy = this.extend(component, {
		//定义类成员
		_static:{
			//私有类属性
			_cache:[],
			//私有类方法
			_save:function(text){
				this._cache.push(text)
			},
			//公开类方法
			history:function(){
				return this._cache
			}
		},
		//定义选项参数
		_options:{
			text:''
		},
		//组件入口
		_init:function(){
			this._exec()
		},
		_exec:function(){
			if(this._getTarget()){
				this._bind()
			}
		},
		_bind:function(){
			var self = this;
			//实例方法中访问构造函数（类）
			var _class = self.constructor;
			this._on('click', this.target, function(){
				//调用类方法
				_class._save(self._options.text);
				self._copy()
			})
		},
		_copy:function(){
			var node = document.createElement('textarea');
			node.value = this._options.text;
			document.body.appendChild(node);
			node.select();
			document.execCommand('copy');
			node.remove();
		},
		//公开的实例方法
		destroy:function(){
			this._off();
			this._reset();
		}
	})

	return Copy
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="调用组件">调用组件</h2>
<script type="text/highlight" data-javascript-options>
import copy from './copy';

//-------实例方式调用
var obj = copy({
	target:'#demo1',
	text:'这是复制的内容'
})

//调用实例方法
obj.destroy()



//-------jQuery形式调用
$('#demo2').copy({
	text:'这是复制的内容'
})

//调用实例方法
$('#demo').copy('destroy')



//-------类方法自动调用
copy.init(Nui.doc) //查询容器内带有data-copy-options属性的元素

//调用类方法销毁有所实例
copy.destroy()
</script>
		</div>	
	</div>
	
	
<div class="f-fl g-sidecol">
    <div class="side">
        <ul class="m-menu f-lh28">
            <li>
                <a class="f-fs16" href="/nui/pages/">介绍</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/doc.html">API文档</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/util.html">实用工具</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/template.html">模板引擎</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/events.html">代理事件</a>
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/element.html">页面元素</a>
                
            </li>
            <li>
                <a class="f-fs16 s-crt" href="/nui/pages/components/">交互组件</a>
                
                <ul>
                    <li>
                        <a  class="s-crt" href="/nui/pages/components/#开发组件">开发组件</a>
                        
                        <ul>
                            <li>
                                <a href="#命名规范">命名规范</a>
                            </li>
                            <li>
                                <a href="#私有实例属性">私有实例属性</a>
                            </li>
                            <li>
                                <a href="#私有实例方法">私有实例方法</a>
                            </li>
                            <li>
                                <a href="#实例方法">实例方法</a>
                            </li>
                            <li>
                                <a href="#私有类属性">私有类属性</a>
                            </li>
                            <li>
                                <a href="#私有类方法">私有类方法</a>
                            </li>
                            <li>
                                <a href="#类方法">类方法</a>
                            </li>
                            <li>
                                <a href="#封装组件">封装组件</a>
                            </li>
                            <li>
                                <a href="#调用组件">调用组件</a>
                            </li>
                        </ul>
                        
                    </li>
                    <li>
                        <a href="/nui/pages/components/router/">路由</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/layer/">弹出层</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/datagrid/">数据网格</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/placeholder/">输入框占位符</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/input/">输入框增强</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/popover/">提示框</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/search/">搜索</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/select/">选择器</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/calendar/">日历</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/tab/">选项卡</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/paging/">分页</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/carousel/">走马灯</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/upload/">文件上传</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/radio/">单选框</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/checkbox/">复选框</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/fixed/">固钉</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/fixed/">数字输入</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/print/">打印</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/collapse/">折叠面板</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/validate/">表单校验</a>
                    </li>
                </ul>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/pack.html">打包工具</a>
                
            </li>
        </ul>
    </div>
</div>


	</div>
	<!-- /content -->

	

    <script type="text/javascript" src="/nui/assets/script/jquery.min.js?v=4223d4c"></script>
<script type="text/javascript" src="/nui/dist/nui-load-min.js?v=94ae756"></script>
<script type="text/javascript" src="/nui/config.js?v=d40711c"></script>
    
    <script type="text/javascript">
	Nui.load("{script}/base-min", function(page){
        page.init()
    })
    </script>
    
    <script type="text/javascript">
    
    </script>
</body>
</html>